<template>
  <div class="m-scroll-board">
    <dv-scroll-board v-if="showPageFlag" :wait-time="10000" :config="configure"
      :style="`width: ${_width}; height: ${_height};font-size:26px !important;font-weight:bold`" />
    <div v-if="props.loading" class="loading m-scroll-board__box">
      <dv-loading>Loading...</dv-loading>
    </div>
    <div v-if="(props.datas.length === 0 || props.config?.data?.length === 0) && !props.loading"
      class="no-data m-scroll-board__box">
      <div>查无数据</div>
    </div>
  </div>
</template>

<script setup>
/** 
 * 使用方法（一）：传入cols、datas
 * 示例：
 *    cols：[
        { type: "seq", width: 50, align: "center", headerAlign: "center", formatter: ({ value, row, column }}) => value },
        { title: "工单号", property： "BILL_NO", width: 140, align: "center", headerAlign: "center", formatter: ({ value, row, column }}) => value },
        ... ...
      ]
      datas: [{ BILL_NO: "工单号1", ... }, { BILL_NO: "工单号2", ... }, ...]
 * 
 * 使用方法（二）：传入config
 * 示例：
 *  config：{
      header: ['列1', '列2', '列3'],
      data: [
        ['<span style="color:#37a2da;">行1列1</span>', '行1列2', '行1列3'],
        ['行2列1', '<span style="color:#32c5e9;">行2列2</span>', '行2列3'],
        ['行3列1', '行3列2', '<span style="color:#67e0e3;">行3列3</span>'],
        ['行4列1', '<span style="color:#9fe6b8;">行4列2</span>', '行4列3'],
        ['<span style="color:#ffdb5c;">行5列1</span>', '行5列2', '行5列3'],
        ['行6列1', '<span style="color:#ff9f7f;">行6列2</span>', '行6列3'],
        ['行7列1', '行7列2', '<span style="color:#fb7293;">行7列3</span>'],
        ['行8列1', '<span style="color:#e062ae;">行8列2</span>', '行8列3'],
        ['<span style="color:#e690d1;">行9列1</span>', '行9列2', '行9列3'],
        ['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3']
      ],
      index: true,
      columnWidth: [50, 100, 200],
      align: ['center', 'center', 'center']
    }
 * 
*/

import { ref, computed, watch, onBeforeMount } from 'vue'

import { useFullScreenStore } from '@/stores/fullScreen'
const fsStore = useFullScreenStore()
// console.log('fsStore', fsStore.isFullScreen)

// // 接口：cols配置
// interface Col {
//   type: string
//   title: string
//   property: string
//   width: number
//   align: string
//   headerAlign: string
//   formatter: Function
//   headerFormatter: Function
// }

// 类型：二维数组
// type NestedArray<T> = T[][]

const props = defineProps({
  width: {
    type: String || Number
    // default: '500px'
  },
  height: {
    type: String || Number
    // default: '200px'
  },
  config: {
    type: Object,
    default: () => {
      return {
        headerBGC: "#3F96A5",
      }
    }
  },
  rowNum: {
    type: Number,
    default: 5
  },
  cols: {
    type: Array,
    default: () => {
      return []
    }
  },
  datas: {
    type: Array,
    default: () => {
      return []
    }
  },
  loading: {
    type: Boolean,
    default: false
  },
  size: {
    type: String,
    default: 'default' // default、small、mini
  }
})

// 字符串、数字转变成像素（px）或百分数
function convertPx(val) {
  switch (typeof val) {
    case 'number':
      return `${val}px`
    case 'string':
      if (val.indexOf('px') > -1 || val.indexOf('%') > -1) {
        return val
      } else {
        return `${val}px`
      }
    default:
      return val
  }
}
// 计算宽度
const _width = computed(() => {
  const val = props.width
  return convertPx(val)
})
// 计算高度
const _height = computed(() => {
  const val = props.height
  return convertPx(val)
})
// 设置列表行内html
function setRowHtml(row, cols) {
  return cols.map((c) => {
    const { align = 'left', formatter, property } = c
    let val = row[property]
    if (typeof val !== 'number') {
      val = val || '--'
    }
    return formatter
      ? formatter({ value: val, row, column: c })
      : `<div class="align-${align}">${val}</div>`
  })
}
// 设置header的html
function setDefaultHeaderColHtml(c) {
  const { headerAlign, align, title } = c
  return `<span style="text-align: ${headerAlign || align || 'left'}">${title}</span>`
}
// 通过props传入的cols、datas配置基础信息
function setConfig() {
  const hasIndex = props.cols.some((r) => r.type === 'seq')
  const cols = props.cols.filter((r) => !!r.property)
  let headerHtmls = cols.map((r) => {
    return r.headerFormatter ? r.headerFormatter(r) : setDefaultHeaderColHtml(r)
  })
  let columnWidths = cols.map((r) => {
    return r.width || 100
  })
  let columnAligns = cols.map((r) => {
    return r.align || 'center'
  })
  let rows = props.datas.map((row) => setRowHtml(row, cols))
  // 有序号：添加序号列
  if (hasIndex) {
    const indexCol = props.cols.find((r) => r.type === 'seq')
    headerHtmls.unshift(indexCol ? indexCol.title : '序号')
    columnWidths.unshift(80)
    columnAligns.unshift('center')
    rows.map((r, i) => {
      const _idx = i + 1
      r.unshift(_idx)
      return r
    })
  }
  return Object.assign(props.config, {
    header: headerHtmls,
    data: rows,
    index: false,
    columnWidth: columnWidths,
    align: columnAligns,
    rowNum: fsStore.isFullScreen ? props.rowNum + 2 : props.rowNum
  })
}
// 设置基础信息
const configure = ref({})
function setConfigure() {
  if (props.cols.length) {
    configure.value = setConfig()
  } else {
    configure.value = props.config
  }
}
// 监听 datas 变化，实时更新视图
watch(
  () => props.datas,
  (n, o) => {
    setConfigure()
  },
  {
    immediate: true,
    deep: true
  }
)
// 监听 全屏 变化，刷新视图层
const showPageFlag = ref(true)
function refreshPage() {
  showPageFlag.value = false
  setTimeout(() => {
    showPageFlag.value = true
  })
}
watch(
  () => fsStore.isFullScreen,
  () => {
    setConfigure()
    refreshPage()
  }
)

// 初始化
onBeforeMount(() => {
  setConfigure()
})
</script>

<style lang="less">
@themeColor: rgb(7, 7, 80);
@fontColor: #FFF;

.m-scroll-board {
  width: 100%;
  height: 100%;
  position: relative;
}

.m-scroll-board>.dv-scroll-board>.header {
  // background-color: rgb(63, 150, 165) !important;
  // background-color: @themeColor !important;
  /* font-size: 20px !important; */
  font-weight: bold;
}

.m-scroll-board>.dv-scroll-board>.header>.header-item {
  /* font-size: 20px !important; */
  font-size: 18px !important;
  padding: 0 5px;
}

.m-scroll-board>.dv-scroll-board>.rows>.row-item>.ceil {
  /* font-size: 20px !important; */
  font-size: 18px !important;
}

.m-scroll-board>.m-scroll-board__box {
  position: absolute;
  top: 35px;
  left: 0;
  right: 0;
  bottom: 0;
}

.m-scroll-board>.m-scroll-board__box>div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* color: #e1ffff; */
  font-size: 14px;
}

.m-scroll-board>.m-scroll-board__box>div.no-data {
  // color: #35a3b6;
  color: @fontColor;
}

/* .m-scroll-board > .rows > .row-item:nth-child(2n + 1) {
  background-color: rgba(150, 173, 177, 0.5) !important;
} */
</style>
